<!--
 * @Author: your name
 * @Date: 2020-08-19 18:08:31
 * @LastEditTime: 2021-05-11 18:16:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mobilephoneStyleb\src\views\user.vue
-->
<template>
  <div>
    <ul>
      <li class="ddd"></li>
      <li class="ss" @click="setbool()">点击我变{{ $store.state.curIdx}}</li>
      <li>我的信息:{{message}}</li>
      <li>{{ $store.state.index}}</li>
      <li class="dad" @click="changeDate_one(33,'hhha')">点击我变{{ $store.state.curIdx}}</li>
      <router-link :to="{name: 'One'}">one</router-link>
      <br />
      <router-link :to="{name: 'Two'}">two</router-link>
    </ul>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      message: "无信息",
      changeDate: "1"
    };
  },

  methods: {
    // vuex的方法
    ...mapMutations(["setbool"]),

    // 点击改变且传参到vuex
    changeDate_one(da, text) {
      this.$store.commit("setbool2", { da, text });
    }
  },
  computed: { ...mapState(["curIdx"]) },
  created() {
    // 将vuex里面的getters传到这边 通常是data数据比较多的情况下
    this.message = this.$store.getters.getMyNews;

    // 重要：
    // 如果发送ajax 请求 vuex需要里面的数据 在actions里面
    // this.$store.dispatch("getData", { key: "aaaaa", model: "cls" });
  }
};
</script>

<style lang="less" scoped>
.aa {
  width: 120px;
  height: 120px;
  background: red;
}

.current {
  color: aqua;
}
.ddd {
  width: 8.8rem;
  height: 1.33rem;
  border: 0px solid #e1e1e1;
  background: #2793d8;
  border-radius: 1rem;
  margin: 0 auto;
}
</style>
